<template>
  <ul>
    <li>
      <router-link
        to="/films/nowplaying"
        active-class="kerwinactive"
        class="icon"
      >
        正在热映
      </router-link>
    </li>

    <li>
      <router-link
        to="/films/comingsoon"
        active-class="kerwinactive"
        class="icon"
      >
        即将上映
      </router-link>
    </li>
  </ul>
</template>

<style lang="scss" scoped>
ul {
  display: flex;
  height: 3.0625rem;
  line-height: 3.0625rem;
  position: sticky;
  top: 0;
  z-index: 10;
  background: white;
  li {
    flex: 1;
    text-align: center;
  }
}
.kerwinactive {
  color: red;
  border-bottom: 2px solid red;
}
</style>
